<template>
    <BaseParam :label="label" :help="help">
        <el-input-number
            v-model="inputValue"
            :min="config?.min"
            :max="config?.max"
            :step="config?.step || 1"
            :precision="config?.precision"
            :controls="config?.controls !== false"
            @change="handleChange"
        />
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { BaseParam } from './index';

const props = defineProps<{
    modelValue?: number;
    label: string;
    help?: string;
    config?: {
        min?: number;
        max?: number;
        step?: number;
        precision?: number;
        controls?: boolean;
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: number): void;
}>();

const inputValue = ref(props.modelValue ?? 0);

watch(() => props.modelValue, (newValue) => {
    inputValue.value = newValue ?? 0;
});

const handleChange = (value: number) => {
    emit('update:modelValue', value);
};
</script> 